<script setup>
import { ref, onMounted } from 'vue';
import { Listapi, resdLIst } from '@/apis/message.js';
import { userList } from '@/hooks/index.js';
const parmes = {
	contentType: 201,
	page: 1,
	pageSize: 10
};
const { getList, goButton, Refresh, list, nothing, isTriggered } = userList(Listapi, parmes);
//列表渲染
onMounted(() => {
	console.log('任务通知');
	// await getList();
});
// const getList = async () => {
// 	// console.log('任务通知页面加载了');
// 	const { data } = await Listapi(parmes);
// 	// console.log('通知列表', data);
// 	list.value.push(...data.items);
// 	if (+data.counts === list.value.length) {
// 		nothing.value = false;
// 	}
// };
// //上拉触底加载更多
// const goButton = () => {
// 	console.log('触底了');
// 	if (nothing.value === false) return;
// 	parmes.Page++;
// 	getList();
// };
// // 下拉刷新
// const isTriggered = ref(false);
// const Refresh = async () => {
// 	isTriggered.value = true; //开启下拉刷新
// 	parmes.Page = 1;
// 	list.value = [];
// 	nothing.value = true;
// 	await getList();
// 	isTriggered.value = false; // 刷新完成时 关闭 loading 效果
// };

//全部已读
const readAllapi = async () => {
	await resdLIst(201);
	//遍历list 数组并修改 item.isRead 为 1
	list.value.forEach((item) => {
		item.isRead = 1;
	});
};
</script>
<template>
	<scroll-view @scrolltolower="goButton" @refresherrefresh="Refresh" refresher-enabled :refresher-triggered="isTriggered" class="scroll-view" scroll-y>
		<view class="scroll-view-wrapper">
			<view class="message-action" @click="readAllapi">
				<text class="iconfont icon-clear"></text>
				全部已读
			</view>
			<uni-card v-for="item in list" :key="item.id" :border="false" :is-shadow="false">
				<view class="brief">{{ item.content }}</view>
				<view class="extra">
					<text class="time">{{ item.created }}</text>
					<navigator hover-class="none" class="link" :url="`/subpkg_message/content/index?id=${item.id}`">查看详情</navigator>
				</view>
				<template v-slot:title>
					<view :class="{ unread: item.isRead === 0 }" class="title">{{ item.title }}</view>
				</template>
			</uni-card>

			<view v-if="list.length === 0" class="message-blank">暂无消息</view>
		</view>

		<view class="box852" v-if="nothing === false">没有更多了...</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
@import './styles.scss';
.box852 {
	text-align: center;
	padding-bottom: 20rpx;
	color: #888;
}
</style>
